<template>
  <div>
    <p>
      <!--
      路由模式mode：
      1. hash
      http://localhost:8080/#/bar
      http://localhost:8080/#/foo

      2. history
      http://localhost:8080/foo
      http://localhost:8080/bar
      -->
      <!-- 使用 router-link 组件来导航. -->
      <!-- 通过传入 `to` 属性指定链接. -->
      <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<!--      <router-link to="/">Home</router-link>-->
      <router-link :to="{ name: 'Home' }">Home</router-link>
      |
      <router-link :to="{ name: 'Music' }">Music</router-link>
      |
      <router-link :to="{ path: '/foo' }">Go to Foo</router-link>
      |
      <router-link to="/bar">Go to Bar</router-link>
      |
      <router-link to="/bmi">Go to BMI</router-link>
      |
      <router-link to="/about">About</router-link>
    </p>
    <p>
      <span @click="linkToHome">Home</span>
      |
      <span @click="linkToAbout">About</span>
    </p>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <div style="border: 2px dotted #00f; padding: 1em">
			<router-view></router-view>
		</div>
  </div>
</template>

<script>
export default {
  methods: {
    linkToHome() {
      // this.$router.push("/")
      // this.$router.replace({
      this.$router.push({
        path: "/",
      })
      // 路由实例
      // console.log(this.$router)
      // 当前页面的路由信息
      // console.log(this.$route)
    },
    linkToAbout() {
      // this.$router.push("/about")
      this.$router.push({
        name: "About"
      })
    }
  }
}
</script>

<style>
body {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin: 0;
}
</style>
